<template>
  <div class="myList">
    <ul>
      <li v-for="item in listData" :key="item.product_id">
        <router-link to>
          <img :src="$target + item.product_picture" :alt="item.product_name" />
          <h2>{{item.product_name}}</h2>
          <h3>{{item.product_title}}</h3>
          <p>
            <span>{{item.product_selling_price}}元</span>
            <span
              v-if="item.product_selling_price != item.product_price"
              class="del"
            >{{item.product_price}}元</span>
          </p>
        </router-link>
      </li>
      <li id="more">
        <router-link to>
          浏览更多
          <i class="el-icon-d-arrow-right"></i>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MyList",
  props: ["listData"],
  data() {
    return {};
  },

  watch: {},

  created() {},

  mounted() {},

  methods: {},

  computed: {}
};
</script>

<style lang="scss" type="text/scss" scoped>
.myList {
  li {
    position: relative;
    float: left;
    padding: 10px 0;
    margin: 0 0 14.5px 13.7px;
    width: 234px;
    height: 280px;
    background-color: #fff;
    transition: all 0.2s linear;
    z-index: 1;

    &#more {
      text-align: center;
      line-height: 280px;
      font-size: 18px;
      color: #333;
    }

    img {
      display: block;
      width: 160px;
      height: 160px;
      background: url(".") no-repeat 50%;
      margin: 0 auto;
    }
    h2 {
      margin: 25px 10px 0;
      font-size: 14px;
      color: #333;
      font-weight: 400;
      text-align: center;

      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    h3 {
      margin: 5px 10px;
      height: 18px;
      font-size: 12px;
      font-weight: 400;
      color: #b0b0b0;
      text-align: center;

      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    p {
      margin: 10px 10px 10px;
      text-align: center;
      color: #ff6700;
      .del {
        margin-left: 0.5em;
        color: #b0b0b0;
        text-decoration: line-through;
      }
    }
  }
}
</style>